<template>
  <div class="filedownload">
    <div>
      <!-- 标题功能栏 -->
      <el-row class="page-heder" :gutter="20">
        <el-col :span="4" class="hidden-xs-only">
          <span class="header-name">资源下载</span>
        </el-col>
        <el-col :span="16">
          <el-select class="header-select" v-model="value" placeholder="请选择">
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-d-caret">排序</el-button>
        </el-col>
      </el-row>
     <!-- 文件列表 -->
      <div >
        <FileList></FileList>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import FileList from "@/components/FileList.vue";
import 'element-ui/lib/theme-chalk/display.css';


export default {
  name: "FileDownload",
  components: {
    FileList,
  },
  data() {
    return {
      options: [
        {
          label: "文件名称",
          options: [
            {
              value: "filename asc",
              label: "文件名称正序"
            },
            {
              value: "filename desc",
              label: "文件名称逆序"
            }
          ]
        },
        {
          label: "文件类型",
          options: [
            {
              value: "filetype asc",
              label: "文件类型正序"
            },
            {
              value: "filetype desc",
              label: "文件类型逆序"
            }
          ]
        },
        {
          label: "修改时间",
          options: [
            {
              value: "lastModified asc",
              label: "修改时间正序"
            },
            {
              value: "lastModified desc",
              label: "修改时间逆序"
            }
          ]
        }
      ],
      value: ""
    };
  }
};
</script>

<style scoped>
.page-heder {
  padding: 30px;
}
.page-heder span {
    display:inline-block;
    padding: 5px;
    margin: auto;
    text-align:center;
    font-size: 18px large;
    line-height:1.5
}
.header-select {
  float: right;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  height: 40px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>